<template>
  <!-- 发布资讯页面 -->
  <div>
    <!-- class="demo-ruleForm" -->
    <el-form
      :model="StudentNewForm"
      :rules="Studentrules"
      ref="Student_Form"
      label-width="100px"
    >
      <el-form-item label="活动标题" prop="title">
        <el-input
          v-model="StudentNewForm.title"
          style="width: 350px"
        ></el-input>
      </el-form-item>
      <el-form-item label="活动栏目" prop="categoryId">
        <el-select
          v-model="StudentNewForm.categoryId"
          placeholder="请选择活动区域"
          clearable
        >
          <el-option
            v-for="stu in studentData.filter((item) => !item.parentId)"
            :key="stu.id"
            :label="stu.name"
            :value="stu.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="封面" prop="cover">
        <el-upload
          class="avatar-uploader"
          :action="uploadFileURL"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="活动形式" prop="content">
        <index v-model="StudentNewForm.content"> </index>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="AddStudent"
          >立即发布</el-button
        >
        <el-button @click="backBtn">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
    
<script>
import index from "../Tinymce/index.vue";
import { showFileURL, uploadFileURL } from "@/utils/config";
import { get, post } from "@/utils/request";
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      StudentNewForm: {
        //标题
        title: "",
        //栏目
        categoryId: "",
        // 封面
        cover: "",
        //内容
        content: "",
      },

      uploadFileURL,
      imageUrl: "",

      Studentrules: {
        title: [
          { required: true, message: "请输入标题名称", trigger: "blur" },
          { min: 3, message: "长度不能小于3字符", trigger: "blur" },
        ],
        categoryId: [
          { required: true, message: "请选择栏目", trigger: "change" },
        ],
        content: [
          { required: true, message: "请填写活动形式", trigger: "blur" },
        ],
      },
    };
  },
  //绑定
  components: {
    index,
  },
  computed: {
    ...mapState("student", ["studentData"]),
  },
  methods: {
    ...mapActions("student", ["getStudentItem"]),
    // 新增功能
    AddStudent() {
      this.$refs["Student_Form"].validate(async (valid) => {
        if (valid) {
          //发送表单验证的请求
          let res = await post("/article/saveOrUpdate", this.StudentNewForm);
          //给用户一个成功的提示
          this.$message({
            showClose: true,
            message: "发布成功",
            type: "success",
          });
          this.$router.push({
            path: "List",
          });
        } else {
          this.$message.error({
            showClose: true,
            message: "发布失败",
            type: "error",
          });
          return false;
        }
      });
    },
    backBtn() {
      this.$router.push({
        path: "List",
      });
    },
    //文件上传之前
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.StudentNewForm.cover = showFileURL + res.data.id;
      console.log(res.data.id);
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 3;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 3MB!");
      }
      return isLt2M;
    },
  },
  created() {
    this.getStudentItem();
  },
  mounted() {},
};
</script>
<style scoped>
</style>